<template>
    <!-- 生命周期函数的演示 -->
    <div>
        <h3>{{msg}}</h3>
        <button @click="setMsg()">执行方法改变msg</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'我是演示生命周期函数组件'
        }
    },
    methods:{
        setMsg(){
            this.msg='我是改变后的数据'
        }
    },
    beforeCreate(){
        console.log('beforeCreate 实例刚刚被创建1');
    },
    created(){
        console.log('created 实例已经创建完成2');
    },
    beforeMount(){
        console.log('beforeMount 模板编译之前3');
    },
    mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
        console.log('mounted 模板编译完成4');
    },
    beforeUpdate(){
        console.log('beforeUpdate 数据更新之前');
    },
    updated(){
        console.log('updated 数据更新完毕');
    },
    beforeDestroy(){   /*页面销毁的时候要保存一些数据(用户没有点击保存,直接返回了)，就可以监听这个销毁的生命周期函数*/
        console.log('beforeDestroy 实例销毁之前');
    },
    destroyed(){
        console.log('destroyed 实例销毁完成');
    }
}
</script>

<style lang="sass" scoped>

</style>

